<div id="app">
	<div class="panel panel-default">
		<div class="panel-heading">
			<form action="" method="GET" class="form-inline" >
				<div class="form-group">
					<label>名称:</label>
					<input type="text" name="mobile" class="form-control" placeholder="">
				</div>
				<button type="submit" class="btn btn-default btn-sm">查找</button>
				<button type="button" class="btn btn-primary  btn-sm" onclick="openAddUserModal();">添加</button>
			</form>
		</div>
		<div class="panel-body role-table-min-height">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th width="40">序号</th>
						<th width="150">手机</th>
						<th width="100">姓名</th>
						<th width="150">备注</th>
						<th width="80">状态</th>
						<th width="200">操作</th>
					</tr>
				</thead>
				<tbody>
				{volist   name="data" id="vo" key="k" } 
					<tr>
						<td>{$k+($p-1)*$size}</td>
						<td>{$vo.mobile}</td>
						<td>{$vo.real_name}</td>
						<td>{$vo.remark}</td>
						<td>
							{if $vo.status_id==1}
							正常
							{else /}停用
							{/if}
						</td>
						<td>
							<button type="button" class="btn btn-primary btn-sm" onclick="editUserModal({$vo|json_encode})">修改</button>
							<button type="button" class="btn btn-danger btn-sm" @click="delUserFunc({$vo.id});">删除</button>
							<button type="button" class="btn btn-default btn-sm" onclick="setRoleModal({$vo.id});">设置角色</button>
							<button type="button" class="btn btn-warning btn-sm" onclick="setPwdModal({$vo.id});">修改密码</button>
						</td>
					</tr>
				{/volist}
				</tbody>
			</table>
		</div>
		<div class="panel-footer">
			{$data|raw}
		</div>
	</div>
	<!-- 添加用户 -->
	<div class="modal fade" ref="addUserModal" id="addUserModal" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close"  aria-hidden="true" onclick="closeAddUserModal();">&times;</button>
					<h4 class="modal-title">添加用户</h4>
				</div>
				<div class="modal-body">
					<form action="" method="POST" class="form-horizontal" role="form">
						<div class="form-group">
							<label  class="col-sm-3 control-label">手机：</label>
							<div class="col-sm-6">
							  <input type="text" class="form-control" name="mobile"  v-model="addData.mobile">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">姓名：</label>
							<div class="col-sm-6">
							  <input type="text" class="form-control"  name="real_name" v-model="addData.real_name">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">密码：</label>
							<div class="col-sm-6">
							  <input type="password" class="form-control" name="password" v-model="addData.password">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">备注</label>
							<div class="col-sm-6">
							  <textarea class="form-control" name="remark" v-model="addData.remark"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" onclick="closeAddUserModal();">关闭</button>
					<button type="button" class="btn btn-primary" @click="addUserFunc">添加</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 编辑用户 -->
	<div class="modal fade" id="editUserModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close"  aria-hidden="true" onclick="closeEditUserModal();">&times;</button>
					<h4 class="modal-title">编辑用户</h4>
				</div>
				<div class="modal-body">
					<form action="" method="POST" class="form-horizontal" role="form">
						<div class="form-group">
							<label  class="col-sm-3 control-label">手机：</label>
							<div class="col-sm-6">
							  <input type="text" class="form-control" name="mobile"  v-model="editData.mobile">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">姓名：</label>
							<div class="col-sm-6">
							  <input type="text" class="form-control"  name="real_name" v-model="editData.real_name">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">密码：</label>
							<div class="col-sm-6">
							  <input type="password" class="form-control" name="password" v-model="editData.password">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">备注</label>
							<div class="col-sm-6">
							  <textarea class="form-control" name="remark" v-model="editData.remark"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">状态</label>
							<div class="col-sm-6">
							  <input type="radio" name="status_id" value="1" v-model.number="editData.status_id">正常
							  <input type="radio" name="status_id" value="2"  v-model.number="editData.status_id">停用
							</div>
						</div>
					</form>					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default"  onclick="closeEditUserModal();">关闭</button>
					<button type="button" class="btn btn-primary" @click="editUserFunc();">保存</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改密码 -->
	<div class="modal fade" id="modifyPassword">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" aria-hidden="true"  onclick="clsoeSetModal();">&times;</button>
					<h4 class="modal-title">修改密码</h4>
				</div>
				<div class="modal-body">
					<form action="" method="POST" class="form-horizontal" >
						<div class="form-group">
							<label  class="col-sm-3 control-label">新密码:</label>
							<div class="col-sm-6">
							  <input type="password" class="form-control" name="password" v-model="setPwd.password">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">确认密码:</label>
							<div class="col-sm-6">
							  <input type="password" class="form-control" name="repassword" v-model="setPwd.repassword">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" onclick="clsoeSetModal();" >关闭</button>
					<button type="button" class="btn btn-primary" @click="modifyPwdFunc">保存</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 设置角色 -->
	<div class="modal fade" id="setRoleModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" aria-hidden="true" onclick="closeSetRoleModal();">&times;</button>
					<h4 class="modal-title">设置角色</h4>
				</div>
				<div class="modal-body">
					<div class="panel panel-default">
						<div class="bg-info pd clearfix">
							<div class="pull-left">
								<label>角色：</label>
								<input type="text" v-model="role_name">
								<button  class="btn btn-default btn-xs" @click="searchRole">查询</button>
								<button  class="btn btn-warning btn-xs" @click="clearRole">清空查询</button>
							</div>
							<div class="pull-right">
								<input type="checkbox" @click="checkAll" v-model="checkall">全选
								<button type="button" class="btn btn-warning btn-xs" @click="setRoleFunc">保存</button>
							</div>
						</div>
						<div class="">
							<table class="table table-hover table-bordered" >
								<thead>
									<tr>
										<th>序号</th>
										<th>名称</th>
										<th>备注</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in rolelist" :key="index">
										<td>@</td>
										<td>{{item.role_name}}</td>
										<td>{{item.remark}}</td>
									    <td v-if="item.status_id==1">
									      正常
									    </td>
									    <td v-else>
									      停用
									    </td>
										<td>
											<input type="checkbox"  :value="item.id" @click="item.state = !item.state" :checked="item.state">
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var el=new Vue({
		el:'#app',
		data:{
			// 添加用户
			addData:{
				mobile:'',
				real_name:'',
				password:'',
				remark:'',
			},
			editData:{
				mobile:'',
				real_name:'',
				password:'',
				remark:'',
				id:0,
				status_id:100
			},
			setPwd:{
				id:0,
				password:'',
				repassword:'',
			},
			setRole:{
				id:0,
				rids:''
			},
			role_name:'',
			rolelist:[],
			// 全选按钮
			checkall:false
		},
		created(){
			// console.log(2)
			this.setRoleList();
		},
		methods:{
			// 添加用户
			async addUserFunc(){
				let {data}=await this.$http.post('admin/user/add',this.addData);
				if(data.code==200){
					alert('添加成功');
					this.forObj(this.addData);
					closeAddUserModal();
				}else{
					alert('添加失败');
				}
			},
			// 编辑用户
			async editUserFunc(){
				let {data}=await this.$http.post('admin/user/update/'+this.editData.id,this.editData)
				if(data.code==200){
					alert('编辑成功');
					this.forObj(this.editData);
					closeEditUserModal();
				}else{
					alert('编辑失败');
				}
			},
			// 删除用户
			async delUserFunc(id){
				var flag=confirm('确定删除吗？');
				if(!flag) return ;
				let {data}=await this.$http.post('admin/user/delete/'+id);
				if(data.code==200){
					alert('删除成功');
				}else{
					alert('删除失败');
				}
			},
			// 修改密码
			async modifyPwdFunc(){
				let {data}=await this.$http.post('admin/user/set/'+this.setPwd.id,this.setPwd);
				if(data.code==200){
					alert('修改成功');
					this.forObj(this.setPwd);
					clsoeSetModal();
				}else{
					alert('修改失败');
				}
			},
			// 设置角色
			async setRoleFunc(){
				this.getRids();
				if(!this.setRole.rids) return alert('请选择角色');
				let {data}=await this.$http.post('admin/user/setrole/'+this.setRole.id,this.setRole);
				if(data.code==200){
					alert('设置成功');
					closeSetRoleModal();
				}else{
					alert('设置失败');
				}
			},
			// 遍历对象，重新赋值，清空
			forObj(obj){
				for(let i in obj){
					obj[i]='';
				}
			},
			// 角色列表
			async setRoleList(role_name=''){
				let {data}=await this.$http.get('admin/user/setlist',{params:{'role_name':role_name}});
				var list=data.data.data;
				list.forEach(function(item) {
			           item['state'] = false;
			    });
				this.rolelist=list
			},
			// 查找角色
			searchRole(){
				this.setRoleList(this.role_name);
			},
			// 清空角色
			clearRole(){
				this.role_name='';
				this.setRoleList();
			},
			// 全选
			checkAll(){
				this.rolelist.forEach((item)=>{
					item.state=!this.checkall;
				})
			},
			// 获取角色ids
			getRids(){
				var rids=[];
				this.rolelist.forEach((item)=>{
					// console.log(item)
					if(item.state){
						rids.push(item.id)
					}
				})
				this.setRole.rids=rids.join(',');
			}
		}
	})
	// 打开添加用户弹出框
	function openAddUserModal(){
		$("#addUserModal").modal('show');
	}	
	// 关闭添加用户弹出框
	function closeAddUserModal(){
		$("#addUserModal").modal('hide');
	}
	// 编辑用户
	function editUserModal(row){
		el.$data.editData=row;
		$('#editUserModal').modal('show');
	}
	function closeEditUserModal(){
		$('#editUserModal').modal('hide');
	}
	// 修改密码
	function setPwdModal(id){
		el.$data.setPwd.id=id;
		$('#modifyPassword').modal('show');
	}
	function clsoeSetModal(){
		$('#modifyPassword').modal('hide');
	}
	// 设置角色
	function setRoleModal(id){
		el.$data.setRole.id=id;
		$("#setRoleModal").modal('show');
	}
	function closeSetRoleModal(){
		$("#setRoleModal").modal('hide');
	}
</script>